<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Uploader</title>
<link href="/lib/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/lib/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/lib/swfobject/swfobject.js"></script>
<script type="text/javascript" src="/lib/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		console.log(swfobject.getFlashPlayerVersion());
		if (swfobject.hasFlashPlayerVersion('9.0.24')) {
			console.log('start');
			$('#file_upload').uploadify({
				'uploader'  : '/lib/uploadify/uploadify.swf',
				'expressInstall'	: '/lib/swfupload/expressInstall.swf',
				'script'    : '/upload.php',
				'cancelImg' : '/lib/uploadify/cancel.png',
				'folder'    : '/uploads',
				'fileExt'	: '*.jpg;*.gif;*.png',
				'fileDesc'	: 'Image Files',
				'multi'		: true,
				'auto'      : true,
				'scriptData': {previewWidth: 200, previewHeight: 0},
				'onComplete': function(event, ID, fileObj, response, data) {
					console.log("onComplete", event, ID, fileObj, response, data);
					response = JSON.parse(response);
					if (response.errors) {
						jQuery(response.errors).each(function(key, value){
							alert(value);
						});
					}
					else {
						var input = jQuery(event.target);
						var uploader = jQuery('#' + event.target.id + 'Uploader');
						var previewId = event.target.id + 'Preview';
						if ( !document.getElementById(previewId) ) {
							uploader.after('<div id="'+previewId+'" />');
						}
						var preview = jQuery('#'+previewId);
						
						jQuery(response.uploaded).each(function(key, value) {
							uploader.before('<input type="hidden" name="'+ input.attr('name') +'" value="'+ value.name +'" />');
							if ( input.uploadifySettings('multi') ) {
								preview.append(value.preview);
							}
							else {
								preview.html(value.preview);
							}
						});
					}						
				},
				'onError'	: function(event,ID,fileObj,errorObj) {
					console.log("onError", event,ID,fileObj,errorObj);
				}
			});
		}
	});
</script>
</head>
<body>
<form action="process.php" method="post" enctype="multipart/form-data">
	<input id="file_upload" name="file_upload1" type="file" />
	<hr />
	<input id="file_upload2[]" name="file_upload2" type="file" />
	<hr />
	<input type="submit" />
</form>
</body>
</html>
